<template>
    <div class="container">
        <div class="head-bar">
            <div class="bc-color-box">
                <div class="tips-box">
                <img class="width-40 height-40" v-if="fileSpace" :src="fileSpace + '/images/success-icon-white.png'" alt="">
                <div class="font-18 font-white font-w mar-l-15">开通成功!</div>
            </div>
            </div>
            <div class="info-box">
                <div class="stripe"></div>
                <div class="info-content">
                    <div class="info-pay font-30 font-w mar-b-18">
                        <span class="font-16">￥</span>{{params.orderPrice}}
                    </div>
                    <div class="mar-b-10 font-13 font-color-6">
                        订单编号：<span class="font-color">{{params.orderNo}}</span>
                    </div>
                    <div class="mar-b-10 font-13 font-color-6">
                        下单时间：<span class="font-color">{{params.createTime}}</span>
                    </div>
                    <div class="mar-b-10 font-13 font-color-6">
                        支付时间：<span class="font-color">{{params.payTime}}</span>
                    </div>
                     <div class="mar-b-10 font-13 font-color-6">
                        订单状态：<span class="font-color">已完成</span>
                    </div>
                    <div class="mar-b-10 font-13 font-color-6">
                        开通工具：<span class="font-color">{{params.marketName}}</span>
                    </div>
                     <div class="font-13 font-color-6 pad-b-25">
                        到期时间：<span class="font-color">{{params.expireTime}}</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="button-box font-15 flex flex-between">
            <button class="home" @click="back_click">返回</button>
            <button class="details" @click="go_cancellation">进入核销台</button>        
        </div>
    </div>
</template>
<script>
export default {
  data() {
    return {
      params: {}
    }
  },
  onShow() {
    let resData = this.getCurrentPage().query.params
    this.params = JSON.parse(resData)
  },
  methods: {
    back_click() {
      this.$pt.reLaunch({url: '/pages/home/main'})
    },
    go_cancellation() {
      this.$pt.redirectTo({url: '/pages/home/cancellation-desk/main'})
    }
  }
}
</script>
<style lang="less" scoped>
@color-green: #20b675;
.head-bar{
    .bc-color-box{
        background: #24ba75;
        height: 160px;
        width: 100%;
        .tips-box{
            display: flex;
            justify-content: center;
            align-items: center;
            padding-top: 35px;
        }
    }
    .info-box{
        width: 100%;
        margin-top: -43px;
        .stripe{
            margin: 0 15px;
            border-radius: 20px;
            height: 10px;
            background: #108c5a;
        }
        .info-content{
            margin-top: -5px;
            background: url('https://veekrayimg.joinsun.vip/images/pay-success-block.png');
            background-size: 90% 100%;
            background-repeat: no-repeat;
            background-position-x: 50%;
            padding: 0 45px;
            .info-pay{
                padding: 40px 0 18px 0;
                border-bottom: 1px dashed #94a09b;
                text-align: center;
            }
        }
    }
}
.button-box{
    margin-top: 35px;
    button{
        width: 150px;
        height: 42px;
        border: 1px solid @color-green;
        box-sizing: border-box;
        color: @color-green;
        background: white;
        line-height: 42px;
        text-align: center;
        border-radius: 20px;
        &::after{
            border: unset;
        }
    }
    .details{
        color: white;
        background: @color-green;
    }
}
</style>
